<script>
import lineChartOption from './chartOptions/lineChartOption';
import ScrollList from './components/ScrollList.vue';
import Chart from './components/Chart.vue';
import Ring from './components/Ring.vue';
import { mockFetch } from './getData';

let timer = null

export default {
    components: {
        ScrollList, // 滚动列表
        Chart, // 线形图
        Ring // 圆环
    },
    data() {
        return {
            active: 'cpu',
            showNames: [
                {
                    name: 'cpu',
                    title: 'CPU core',
                    symbol: '%'
                },
                {
                    name: 'mem',
                    title: '内存 GiB',
                    symbol: 'GB'
                },
                {
                    name: 'disk',
                    title: '本地存储 GB',
                    symbol: 'GB'
                },
                {
                    name: 'nodeOnline',
                    title: '容器组',
                    symbol: ''
                }
            ],
            nowData: { // 记录当前数据
                cpu: 80,
                createTime: '2024-02-26 12:11:45',
                disk: 328.50,
                gpu: 10.0,
                id: 1,
                mem: 3.41,
                memswap: 2.03,
                nodeOnline: 3,

                cpuTotal: 100,
                diskTotal: 588.00,
                gpuTotal: 100.0,
                memTotal: 62.64,
                memswapTotal: 31.15,
                nodeOnlineTotal: 8,
            },
            history: [],  // 记录历史数据
        }
    },
    computed: {
        activeData() { // 获取当前选中项的数据
            const obj = this.showNames.find(item => item.name === this.active);
            obj.data = this.nowData[this.active];
            obj.totalData = this.nowData[`${this.active}Total`];
            obj.historyData = this.history.map(item => item[this.active]);
            return obj
        }
    },
    methods: {
        lineChartOption,
        getData() {
            // TODO 在这里调取接口获取数据
            mockFetch()
                .then(res => {
                    this.nowData = res;
                    if (this.history.length > 9) {
                        this.history.shift()
                    }
                    this.history.push(res)
                })
        },
        handleActive(data) {
            this.active = data;
        }
    },
    mounted() {
        this.getData();
        this.active = this.showNames[0].name;
        timer = setInterval(() => {
            this.getData()
        }, 2000)
    },
    beforeDestroy() {
        if (timer) {
            clearInterval(timer)
        }
    }
}
</script>

<template>
    <div class="root">
        <el-row style="margin-top: 20px;" :gutter="12" class="setion_item2">
            <el-col :span="10">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>集群节点状态</span>
                    </div>
                    <div class="jdzt">
                        <div class="jdzt-chart">
                            <Ring :data="8" :total="8" type="white" width="100px" height="100px" />
                        </div>
                        <div class="info">
                            <div class="f-b">节点在线状态</div>
                            <div>在线节点：8</div>
                            <div>全部节点：8</div>
                        </div>
                    </div>
                </el-card>

            </el-col>
            <el-col :span="14">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>组件状态</span>
                    </div>
                    <ScrollList />
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top: 12px;">
            <div slot="header" class="clearfix">
                <span>集群资源使用情况</span>
            </div>
            <el-row class="jqzy">
                <el-col :span="8">
                    <div v-for="item in showNames" :key="item.name"
                        :class="active === item.name ? 'active list-item' : 'list-item'" @click="handleActive(item.name)">
                        <div class="item-chart">
                            <Ring :data="nowData[item.name]" :total="nowData[`${item.name}Total`]"
                                :type="active === item.name ? 'white' : 'blue'" width="90px" height="90px"
                                :notitle="true" />
                        </div>

                        <div class="item-text">
                            <div class="item-title">{{ item.title }}</div>
                            <div>
                                <span class="im-number">{{ nowData[item.name] }}</span>
                                <span>/{{ nowData[`${item.name}Total`] }}{{ item.symbol }}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <Chart :key="active" :optionfn="lineChartOption([activeData.title], [(data) => data], ['#a29bfe'])"
                        :datas="activeData.historyData" :total="activeData.totalData" :symbol="activeData.symbol" />
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<style>
.root {
    font-family: emoji;

    .el-card__header {
        font-weight: bold;
        border-bottom: none;
    }

    .el-card {
        border-radius: 8px;
    }

    .jdzt {
        display: flex;
        align-items: center;
        padding: 0 40px;
        background-color: #539cc9;
        height: 180px;
        border-radius: 8px;
        color: #fff;
        font-size: 14px;

        .info {
            div {
                padding: 4px 0;
            }
        }

        .jdzt-chart {
            width: 100px;
            height: 100px;
            /* background-color: pink; */
            margin-right: 60px;
        }
    }

    .f-b {
        font-weight: bold;
        font-size: 16px;
    }

    .jqzy {
        .list-item {
            display: flex;
            align-items: center;
            padding: 0 40px;
            height: 144px;
            background-color: #fbfcfe;
            border-radius: 8px;
            margin-bottom: 8px;

            &.active {
                background-color: #539cc9;

                .item-text {
                    color: #fff;
                }
            }

            .item-chart {
                width: 90px;
                height: 90px;
                margin-right: 20px;
            }

            .item-text {
                font-weight: 600;
                font-size: 14px;
            }

            .item-title {
                margin-bottom: 6px;
            }

            .im-number {
                font-size: 26px;
            }
        }
    }
}
</style>

